<template>
  <section class="bigScreenBox" ref="bigScreenBoxRef">
    <slot></slot>
  </section>
</template>
<script lang="ts" setup name="BigScreenScale">
import { onMounted ,onUnmounted,shallowRef} from 'vue'
const bigScreenBoxRef = shallowRef<HTMLHtmlElement | null>(null)

const reRender = () => {
  const screenWidth: number = document.documentElement.clientWidth
  const screenHeight: number = document.documentElement.clientHeight
  const widthScale = (screenWidth / 1920).toFixed(10)
  const heightScale = (screenHeight / 1080).toFixed(10)
  const scale = widthScale < heightScale ? widthScale : heightScale
  bigScreenBoxRef.value.style.transform = `scale(${scale})`
  bigScreenBoxRef.value.style.transformOrigin = 'left top'
  const x = (screenWidth - parseInt((1920 * Number(scale)).toFixed(2))) / 2 + 'px'
  const y = (screenHeight - parseInt((1080 * Number(scale)).toFixed(2))) / 2 + 'px'
  bigScreenBoxRef.value.style.translate = `${x} ${y}`
}

onMounted(() => {
  reRender()
  window.addEventListener('resize', reRender)
})

onUnmounted(() => {
  removeEventListener("resize", reRender)
})
</script>

<style scoped>
.bigScreenBox{
  position: relative;
  width: 1920px;
  height: 1080px;
}
</style>
